<template>
	<div class="person">
		<h1>我是Person组件，下面组件共有{{newsList.length}}条新闻</h1>
		姓名：<input type="text" v-model="userName">
		年龄：<input type="text" v-model.number="userAge">
		<button @click="addPerson">添加</button>
		<ul>
			<li v-for="p in persons" :key="p.id">
				姓名：{{p.name}}，年龄：{{p.age}}
			</li>
		</ul>
	</div>
</template>

<script>
	import {nanoid } from 'nanoid'
	import {mapState} from 'vuex'
	export default {
		name:'Person',
		data() {
			return {
				userName:'',
				userAge:18
			}
		},
		computed:{
			...mapState(['persons','newsList'])
		},
		methods: {
			addPerson(){
				//包装一个person对象
				const person = {id:nanoid(),name:this.userName,age:this.userAge}
				//联系“大厨”添加一个人
				this.$store.commit('ADD_PERSON',person)
			}
		},
	}
</script>

<style scoped>
	.person{
		background-color: orange;
		padding: 20px;
	}
</style>